<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="auto">
                <el-menu default-active="" class="el-menu-vertical-demo" :collapse="isCollapse" router>
                    <img v-show="!isCollapse" src="../../assets/img/pic/logo/white.png" class="aside_title_close"
                        @click="isCollapse = true" />
                    <i class="el-icon-s-unfold aside_title_open" v-show="isCollapse" @click="isCollapse = false"></i>
                    <el-submenu index="100" :popper-append-to-body="true">
                        <template slot="title">
                            <i class="el-icon-setting el-i"></i>
                            <span>{{ $t("menus['基础设置']") }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">{{ $t("menus['网站设置']") }}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu v-for="(item, index) in menus" :key="item.id" :index="index + ''">
                        <template slot="title">
                            <i :class="[item.icon, 'el-i']"></i>
                            <span>{{ $t(`menus["${item.title }"]`) }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(m, i) of item.children" :key="m.id" :index="m.url">{{
                                $t(`menus["${m.title
                            }"]`) }}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <el-badge is-dot class="title_msg">
                        <i class="el-icon-s-comment"></i>
                    </el-badge>
                    <el-dropdown class="dropdown1" @command="changeTheme">
                        <span class="el-dropdown-link">{{ $t("title.theme") }}<i
                                class="el-icon-arrow-down el-icon--right"></i></span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="orange">温馨黄</el-dropdown-item>
                                <el-dropdown-item command="blue">商务蓝</el-dropdown-item>
                                <el-dropdown-item command="pink">贤淑粉</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <el-dropdown class="dropdown2" @command="changeLang">
                        <span class="el-dropdown-link">{{ $t("title.lang") }}<i
                                class="el-icon-arrow-down el-icon--right"></i></span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="zh">中文</el-dropdown-item>
                                <el-dropdown-item command="en">英文</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-dropdown class="dropdown3" @command="changeUser">
                        <span class="el-dropdown-link">{{ userName }}<i
                                class="el-icon-arrow-down el-icon--right"></i></span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="out">退出</el-dropdown-item>
                                <el-dropdown-item command="edit">修改信息</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <img :src='screenFull ? exitImg : fullImg' class="fullScreen" @click="changeScreen" />
                </el-header>
                <el-main>
                    <el-breadcrumb separator=" /">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import screenfull from 'screenfull';
import switchTheme from "../../utils/theme/index"
export default {
    data() {
        return {
            isCollapse: false,
            screenFull: false,
            fullImg: require("@/assets/img/icon/index/full.svg"),
            exitImg: require('@/assets/img/icon/index/exitfull.svg'),
            userName: "",
            menus: []
        }
    },

    mounted() {
        let userInfo = localStorage.getItem('userInfo')
        let { menus, username } = JSON.parse(userInfo)
        this.userName = username
        this.menus = menus
        screenfull.on('change', () => {
            this.screenFull = !this.screenFull
        });

    },
    methods: {
        changeTheme(themeName) {
            switchTheme(themeName)
        },
        changeLang(lang) {
            this.$i18n.locale = lang
        },
        changeScreen() {
            if (!screenfull.isEnabled) {
                this.$message({
                    message: '暂不支持',
                    type: 'warning'
                });
            } else {
                screenfull.toggle();
            }
        },
        changeUser(type) {
            type == "out" ? this.loginOut() : this.userEdit()
        },
        loginOut() {
            this.$confirm('确认退出吗？')
                .then(res => {
                    localStorage.removeItem('userInfo')
                    this.$router.replace('/login')
                })
                .catch(_ => { });
        },
        userEdit() { }
    }
}
</script>
<style scoped lang="less">
@import "../../assets/less/theme.less";

.common-layout,
.el-container {
    width: 100vw;
    height: 100vh;
}

.el-header {
    background-color: @aside-bg-color;
    color: #333;
    position: relative;
}

.title_msg {
    position: absolute;
    right: 450px;
    top: 23px;
}

.el-header div[class*="dropdown"] {
    position: absolute;
    line-height: 60px;
    color: @title-color;
}

.el-header .dropdown1 {
    right: 340px;
}

.el-header .dropdown2 {
    right: 240px;
}

.el-header .dropdown3 {
    right: 140px;
}

.fullScreen {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 40px;
    top: 15px;
    background: @full-screen-color;
    cursor: pointer;
}

.el-aside {
    background: @aside-bg-color;
    color: #333;
    overflow: hidden;
}

.aside_title_close {
    width: 130px;
    height: 35px;
    margin: 20px 32px;
    cursor: pointer;
}

.aside_title_open {
    cursor: pointer;
    color: white;
    font-size: 50px;
}

/deep/.el-menu {
    background: @menu-bg-color;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100vh;
    background: @aside-bg-color;
}

/deep/.el-submenu__title {
    color: white;
}

.el-submenu .el-i {
    color: white;
}

.el-submenu /deep/.el-icon-arrow-down::before {
    content: "\e6df";
    color: white;
}

/deep/.el-submenu__title:hover {
    // color: #FF6040 !important;
    // font-weight: bold;
    background-color: gray !important;
}

.el-menu-item:hover {}

.el-main {
    background-color: #eee;
    color: #333;
}
</style>